<template>
  <div class="bag">
    <div class="form_box">
      <div class="qr_code">
        <p>
          欢迎进入
          <br />
          后台管理平台
        </p>
      </div>
      <div class="login">
        <div class="login_top">
          <p>账号密码登录</p>
        </div>
        <form class="form">
          <label
            :class="{
              bor: true,
              shadow_c: shadow === 0 ? true : false,
              redBor: yqerr,
            }"
            @click="shadow = 0"
          >
            <span class="ico"><img src="./img/小房子.png" alt="" /></span>
            <input
              v-model="yq"
              @blur="shadow = false"
              @change="yqerr = false"
              type="text"
              :placeholder="
                person
                  ? '请输入企业账号'
                  : '请输入企业账号/绑定在成员账号的手机/邮箱'
              "
            />
            <p v-show="yqerr">请输入企业账号</p>
          </label>
          <label
            :class="{
              bor: true,
              shadow_c: shadow === 1 ? true : false,
              redBor: cyerr,
            }"
            @click="shadow = 1"
            v-show="person"
          >
            <span class="ico"><img src="./img/账户资产.png" alt="" /></span>
            <input
              v-model="cy"
              @blur="shadow = false"
              @change="cyerr = false"
              type="text"
              placeholder="请输入成员账号"
            />
            <p v-show="cyerr">请输入成员账号</p>
          </label>
          <label
            :class="{
              bor: true,
              shadow_c: shadow === 2 ? true : false,
              redBor: mmerr,
            }"
            @click="shadow = 2"
          >
            <span class="ico"><img src="./img/密码.png" alt="" /></span>
            <input
              v-model="mm"
              @blur="shadow = false"
              @change="mmerr = false"
              :type="(see ? 'text' : 'password')"
              placeholder="请输入密码"
            />
            <span class="ico">
              <img
                :src="
                  see
                    ? require('./img/小眼睛开.png')
                    : require('./img/小眼睛.png')
                "
                @click="see = !see"
                alt=""
              />
            </span>
            <p v-show="cyerr">请输入密码</p>
          </label>
          <label class="checkbox">
            <input type="checkbox" v-model="person" />
            使用成员帐号登录
          </label>
          <div class="wjmm">
            <label class="checkbox">
              <input type="checkbox" />
              两周内免登录
            </label>
            <a href="#">忘记密码？</a>
          </div>
          <label class="lastLab">
            <button @click="changeStyle" class="dl" type="button">登录</button>
          </label>
        </form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      shadow: 'none',
      see: false,
      person: false,
      yq: '',
      cy: '',
      mm: '',
      yqerr: false,
      cyerr: false,
      mmerr: false,
    }
  },
  methods: {
    changeStyle() {
      if (this.yq == '' && this.cy == '' && this.mm == '') {
        this.yqerr = this.cyerr = this.mmerr = this.allerr = true
      }
    },
  },
}
</script>
<style lang="scss">
* {
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
}

.bag {
  width: 100vw;
  height: 100vh;
  background: url('./img/背景.png') no-repeat;
  background-size: cover;
  position: relative;
}
.form_box {
  width: 920px;
  height: 600px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: #fff;
  border-radius: 10px;
  display: flex;
  .qr_code {
    width: 224px;
    height: 600px;
    background: url('./img/盒子背景.png') center no-repeat;
    padding: 0 78px;
    p {
      color: #fff;
      font-size: 28px;
      margin-top: 150px;
      letter-spacing: 9px;
    }
  }
}
.login {
  padding: 50px 60px;
}
.login_top {
  margin: 0 0 16px;
  border-bottom: 1px solid #e8e8e8;
  width: 420px;
  p {
    cursor: pointer;
    font-size: 20px;
    color: #40a9ff;
    border-bottom: #40a9ff 3px solid;
    padding: 20px 16px;
    width: 152px;
    box-sizing: border-box;
    margin-top: 1px;
  }
}
.form {
  margin-top: 15px;
  label {
    width: 364px;
    height: 26px;
    padding: 6px 11px 6px 15px;
    display: block;
    position: relative;
    margin-bottom: 24px;
    border-radius: 4px;
    color: rgba(0, 0, 0, 0.65);
    transition: all 0.3s;
    &:hover {
      border-color: #40a9ff;
    }
    p {
      font-size: 12px;
      color: red;
      position: absolute;
      right: 0;
      top: 40px;
    }
    img {
      width: 18px;
      height: 18px;
      vertical-align: middle;
      margin-right: 10px;
    }
  }
  .bor {
    border: 1px solid #ccc;
    input {
      outline: 0;
      border: 0;
      font-size: 14px;
      letter-spacing: 1px;
      width: 308px;
    }
  }
  .redBor {
    border-color: red;
  }
  .checkbox {
    width: 150px;
    height: 30px;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    cursor: pointer;
    font-size: 14px;
    input {
      width: 15px;
      height: 15px;
      outline: none;
    }
  }
  .wjmm {
    position: relative;
    a {
      position: absolute;
      top: 0;
      right: 0;
      color: #999;
      font-size: 14px;
      &:hover {
        color: #40a9ff;
        text-decoration: underline;
      }
    }
  }
  .lastLab {
    margin-top: 20px;
    padding-left: 0;
  }
  .dl {
    background-color: #34acff;
    width: 420px;
    height: 50px;
    color: #fff;
    font-size: 20px;
    border: none;
    outline: none;
    cursor: pointer;
    border-radius: 5px;
  }
}
.shadow_c {
  box-shadow: 1px 1px 3px #40a9ff, -1px -1px 2px #40a9ff;
}
</style>
